window.addEventListener('load', function() {
    // 一.获取元素
    var list_ul = document.querySelector('.list-ul'); //已经添加的全部项目区域
    var list_up = document.querySelectorAll('.list-up'); //上移按钮
    var list_down = document.querySelectorAll('.list-down'); //下移按钮
    var list_del = document.querySelectorAll('.list-del'); //删除按钮
    var list_bottom = document.querySelector('.list-bottom');
    var list_add_show = document.querySelector('.list-add-show'); //添加项目按钮
    var list_add_area = document.querySelector('.list-add-area'); //待添加列表区域

    // 二.
    // 2.1 给所有上移按钮添加点击事件
    list_up.forEach(function(value) {
        value.addEventListener('click', function() {
            // 当前点击的项目移动到前一个项目前
            let current = this.parentNode.parentNode;
            list_ul.insertBefore(current, current.previousElementSibling);
        });
    });
    // 2.2 给所有下移按钮添加点击事件
    list_down.forEach(function(value) {
        value.addEventListener('click', function() {
            // 当前点击的项目的下一个兄弟元素移动到当前项目前面
            let current = this.parentNode.parentNode;
            list_ul.insertBefore(current.nextElementSibling, current);
        });
    });
    // 2.3删除
    list_del.forEach(function(value) {
        value.addEventListener('click', function() {
            this.parentNode.parentNode.remove();
        });
    });

    // 三.添加项目
    list_add_show.addEventListener('click', function() {
        let newProject = list_add_area.cloneNode(true); //深克隆
        newProject.classList.remove('hide'); //移除隐藏元素的类名
        list_bottom.appendChild(newProject); //给待添加项目区域有追加克隆元素
        //3.1 点击待添加项目添加按钮执行下列代码
        newProject.children[1].addEventListener('click', function() {
            let values = this.previousElementSibling.value.trim(); //输入框的值
            if (values == '') { //如果输入框没有值则提示输入
                alert('请输入文字');
            } else { //有值执行下列代码
                let li = document.createElement('li'); //新建小例
                li.classList.add('list-option'); //给小例添加类(与上边项目添加的类一样)
                li.innerHTML = '<input class="list-input" type="text"><span class="list-btn"><span class="list-up"> [上移] </span><span class="list-down"> [下移] </span><span class="list-del"> [删除] </span></span>';
                li.children[0].setAttribute('value', values); //给新建的项目中的文本框设置值
                list_ul.appendChild(li);
                li.children[1].children[0].addEventListener('click', function() {
                    list_ul.insertBefore(li, li.previousElementSibling);
                }); //给新生成的项目添加上移事件
                li.children[1].children[1].addEventListener('click', function() {
                    list_ul.insertBefore(li.nextElementSibling, li);
                }); //给新生成的项目添加下移事件
                li.children[1].children[2].addEventListener('click', function() {
                    li.remove();
                }); //给新生成的项目添加删除事件
                newProject.remove(); //项目添加后就删除待添加项目
            };
        });
        //3.2 取消
        newProject.children[2].addEventListener('click', function() {
            this.parentNode.remove();
        });
    });
});